<template>
  <echarts
    ref="chart"
    v-loading="loading"
    :theme="theme"
    :auto-resize="true"
    :init-options="initOption"
    :options="option"
    element-loading-text="Loading..."
    class="chart"
    @click="handleChartClick"
  />
</template>

<script>
import { getMapProvinceConfig } from '../config/map-province-config'
export default {
  name: 'MapProvince',
  props: {
    loading: {
      type: Boolean,
      default: true
    },
    option: {
      type: Object,
      default() {
        return getMapProvinceConfig()
      }
    },
    apiData: {
      type: Object,
      default() {
        return {}
      }
    },
    theme: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      chartType: 'mapProvince',
      initOption: getMapProvinceConfig().option
    }
  },
  watch: {
    apiData: function() {
      this.setData()
    }
  },
  async mounted() {
    const chart = this.$refs.chart
    this.$emit('init', {
      chart: chart
    })
  },
  methods: {
    handleChartClick(param) {
    },
    setData() {
      const _data = this.apiData
      // 省份
      this.option.geo.map = _data.province
      this.option.series[0].map = _data.province
      this.option.series[0].data = _data.data
      var sortData = JSON.parse(JSON.stringify(_data.data))
      var data = sortData.sort(function(a, b) {
        return b.value - a.value
      })
      this.option.visualMap.max = data[0].value
    }
  }
}
</script>

<style scoped>

</style>
